<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="http://res.kuoqps.com/kuoqi-ui/web.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="http://res.kuoqps.com/kuoqi-js/kq.1.06/kq.1.06.dev.js"></script>
    <script src="http://res.kuoqps.com/kuoqi-ui/app.js"></script>
    <script src="js/main.js"></script>
</head>

<body>
<div class="container">
    <!--头部区域-->
    <div class="row admin-trow">
        <div class="col-12">
            <div class="">欢迎访问本页面,这里是列表</div>
        </div>
    </div>
    <!--列表区域-->
    <div class="row admin-brow">
        <div class="col-12 pdl-none pdr-none">
            <div class="card card-table">
                <!--头部信息-->
                <div class="card-head">
                    <div class="row-tbar">
                        <button class="btn btn-small btn-add">批量增加</button>
                        <button class="btn btn-small btn-selectall">全选</button>
                    </div>
                </div>
                <!--一般只要这个就够了，这里主要存放table列表-->
                <div class="card-body">
                    <table class="table table-small table-toggle" width="100%" border="none">
                        <thead>
                            <tr>
                                <th width="40">序号</th>
                                <th>ID</th>
                                <th>用户名</th>
                                <th>单行显示</th>
                                <th width="240">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-c">1</td>
                                <td>1</td>
                                <td>幻冰</td>
                                <td>幻冰是幻冰小站的站长</td>
                                <td class="text-c">
                                    <a class="btn btn-small btn-edit">编辑</a>
                                    <a class="btn btn-small btn-del">删除</a>
                                    <a class="btn btn-small">显示全部</a>
                                    <a class="btn btn-small">取消前摇</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-c">1</td>
                                <td>1</td>
                                <td>幻冰</td>
                                <td>幻冰是幻冰小站的站长</td>
                                <td class="text-c">
                                    <a class="btn btn-small btn-edit">编辑</a>
                                    <a class="btn btn-small btn-del">删除</a>
                                    <a class="btn btn-small">显示全部</a>
                                    <a class="btn btn-small">取消前摇</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-c">1</td>
                                <td>1</td>
                                <td>幻冰</td>
                                <td>幻冰是幻冰小站的站长</td>
                                <td class="text-c">
                                    <a class="btn btn-small btn-edit">编辑</a>
                                    <a class="btn btn-small btn-del">删除</a>
                                    <a class="btn btn-small">显示全部</a>
                                    <a class="btn btn-small">取消前摇</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-c">1</td>
                                <td>1</td>
                                <td>幻冰</td>
                                <td>幻冰是幻冰小站的站长</td>
                                <td class="text-c">
                                    <a class="btn btn-small btn-edit">编辑</a>
                                    <a class="btn btn-small btn-del">删除</a>
                                    <a class="btn btn-small">显示全部</a>
                                    <a class="btn btn-small">取消前摇</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!--列表底部，一般用于存放分页等信息-->
                <div class="card-foot">
                    <div class="row-bbar text-r">
                        <ul class="pager pager-small">
                            <li><a href="/Artic/Index?page=1">&lt;&lt;</a></li>
                            <li><a href="/Artic/Index?page=5">&lt;</a></li>
                            <li class="active"><a href="/Artic/Index?page=1">1</a></li>
                            <li><a href="/Artic/Index?page=2">2</a></li>
                            <li><a href="/Artic/Index?page=3">3</a></li>
                            <li><a href="/Artic/Index?page=4">4</a></li>
                            <li><a href="/Artic/Index?page=7">&gt;</a></li>
                            <li><a href="/Artic/Index?page=21">&gt;&gt;</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
